<template>
  <div>
    <el-dialog
      title="发送图片"
      v-model="state.isShow"
      lock-scroll
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      draggable
      align-center
      width="400px"
      @closed="closed"
    >
      <div class="w-full max-h-[500px] overflow-y-auto" v-loading="state.loading">
        <img class="w-full h-full" :src="src" />
      </div>
      <template #footer>
        <el-button @click="closed">取 消</el-button>
        <el-button type="primary" @click="confirm">发 送</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { reqUploadImg } from "@/api/user";
import { debounce } from "lodash-es";

const props = withDefaults(
  defineProps<{
    src: string;
    file: File | null;
  }>(),
  {}
);
const emit = defineEmits(["upload", "close"]);
const state = reactive({
  isShow: false,
  loading: false
});
const closed = () => {
  state.isShow = false;
};
const open = () => {
  state.isShow = true;
};
const confirm = debounce(
  async () => {
    if (props.file) {
      try {
        state.loading = true;
        let param = new FormData();
        param.append("ImgPath", props.file);
        const res = await reqUploadImg(param);
        state.loading = false;
        emit("upload", res.data.ImgPath);
        nextTick(() => {
          closed();
        });
      } catch (error) {
        state.loading = false;
        console.log(error);
      }
    }
  },
  500,
  { leading: true, trailing: false }
);

defineExpose({
  open
});
</script>
<style scoped lang="scss">
:deep(.el-dialog__body) {
  padding: 20px;
}
</style>
